body {
  width: 1920px;
}

.source-analysis {
  width: 1270px;
  flex-shrink: 0;
}

.level-labels {
  position: absolute;
  left: 28px;
  font-size: 13px;
  color: #A0A1B4;
  bottom: 40px;

  li {
    display: flex;
    align-items: center;
  }

  &__block {
    margin: 8px;
    margin-bottom: 8px;
    width: 30px;
    height: 12px;
  }
}

.level-block {
  &_1 {
    background: rgba(232,118,222,0.53);
    border: 1px solid #F95FB6;
  }

  &_2 {
    background: rgba(248,231,28,0.28);
    border: 1px solid #F8E71C;
  }

  &_3 {
    background: rgba(55,201,54,0.60);
    border: 1px solid #37C936;
  }

  &_4 {
    background: rgba(3,206,249,0.66);
    border: 1px solid #03CEF9;
  }

  &_5 {
    background: rgba(0,255,255,0.27);
    border: 1px solid rgba(0,255,255,0.69);
  }

  &_6 {
    background: rgba(3,206,249,0.28);
  }
}

.source-analysis-data {
  position: absolute;
  top: 36px;
  right: 42px;
  width: 433px;

  .query-condition {
    margin: 0 auto;
    width: 254px;
    text-align: center;
    font-size: 0;

    .bg-top {
      margin-bottom: 8px;
      width: 256px;
      height: 9px;
      background: url('../img/query_section_top.png') no-repeat;
    }

    .bg-bottom {
      margin-top: 8px;
      width: 256px;
      height: 9px;
      background: url('../img/query_section_bottom.png') no-repeat;
    }
  }

  &__list {
    margin-top: 16px;
    width: 100%;
    height: 380px;
    padding: 18px 76px 0 68px;
    background: url('../img/source_list_bg.png') no-repeat;

    ul li {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      height: 34px;
      color: #DBDAEA;
      line-height: 34px;

      &:nth-child(1) {
        .rank-number {
          background: rgba(232, 118, 222, 0.53);
          border: 1px solid #F95FB6;
        }
      }

      &:nth-child(2) {
        .rank-number {
          background: rgba(248, 231, 28, 0.28);
          border: 1px solid #F8E71C;
        }
      }

      &:nth-child(3) {
        .rank-number {
          background: rgba(55, 201, 54, 0.6);
          border: 1px solid #37C936;
        }
      }
    }

    .rank-number {
      margin-right: 2px;
      display: inline-block;
      height: 22px;
      width: 22px;
      line-height: 22px;
      text-align: center;
      vertical-align: middle;
    }
  }
}

/* 旅游人数占比 */
.tourist-number-ratio {
  margin-right: 0;
  flex-shrink: 0;
  flex: 1;
}

.tourist-sexy-analysis {
  width: 550px;
}

.tourist-days-analysis {
  width: 622px;
}

.scenic-spot-top {
  margin-right: 0;
  min-width: 622px;
  flex: 1;

  .query-condition {
    position: absolute;
    right: 30px;
    top: 22px;
  }
}

#touristSexyPie {
  margin: 0 auto;
  width: 100%;
  height: 350px;
}

#touristDaysChart {
  position: relative;
  top: -20px;
  width: 100%;
  height: 380px;
}

.scenic-spot-list {
  font-size: 14px;
  color: #A3AED9;
  line-height: 30px;

  > li {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
  }

  .scenic-spot-list-item {
    &__label {
      margin-right: 14px;
      width: 70px;
      overflow: hidden;
      text-align: right;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &__value {
      position: relative;
      height: 14px;
      background: rgba(74,114,255,0.14);
      border: 1px solid rgba(74,114,255,0.33);
      flex: 1;
    }
  }
  .value-bar {
    position: absolute;
    top: -1px;
    left: -1px;
    height: 14px;
    background: rgba(55,201,54,0.60);
    border: 1px solid #37C936;
  }
}

#touristNumberRatioChart {
  margin: 0 auto;
  width: 450px;
  height: 450px;
}

#sourceAnalysisChart {
  margin-left: 120px;
  margin-top: -60px;
  width: 720px;
  height: 580px;
}
#scenicSpotChart {
  width: 100%;
  height: 360px;
}